<template>
    <div class="Login">
        <el-form class="frosted">
            <el-form-item>
                <el-image class="logo" :src="require('@/assets/logo.png')"/>
            </el-form-item>
            <el-form-item >
                <div class="group">
                    <input v-model="username" required="" type="text" class="input" @keyup.enter.native="getHandle">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>Name</label>
                </div>
            </el-form-item>
            <el-form-item >
                <div class="group">
                    <input v-model="password" required="" type="password" class="input" @keyup.enter.native="getHandle">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>PassWord</label>
                </div>
            </el-form-item>
            <el-form-item>
                <button  @click="getHandle" type="button" :disabled="isDisabled"> login</button> 
            </el-form-item>
            <el-form-item>
                <div class="login-other">
                    <div class="toRegister">
                        <span>还没注册？</span><a @click="toRegister">去注册</a>
                    </div>
                    <div class="forgetPwd">
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="暂未开启此功能,将尽快上线"
                            placement="bottom"
                        >
                            <span><a @click="forgetPwd">忘记密码</a></span>
                        </el-tooltip>
                    </div>
                </div>
            </el-form-item>
        </el-form>  
    </div>
</template>

<script>
import { ElNotification} from 'element-plus'
import { login } from "@/request/api"

export default {
    name:"login",
    data () {
        return {
            username:'',
            password:'',
            isDisabled:false //登录按钮是否使用 防止用户过分点击
        }
    },
    methods:{
        getHandle(){
            this.isDisabled = true
            login(this.$data.username,this.$data.password)
            .then(res=>{
                if(res.code == 200){
                    ElNotification.success({
                        title:"登陆成功",
                        message:"欢迎回来",
                        offset:100
                    })
                    this.$router.push("/home")
                }else{
                    ElNotification.error({
                        title:"登陆失败",
                        message:res.message,
                        offset:100
                    })
                }
                this.isDisabled = false
            }) 
        },
        toRegister(){
            this.$router.push("/auth/register")
        },
        forgetPwd(){
           
        }
        
    }
}
</script>

<style scoped>
/* 毛玻璃 */
.frosted{
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 25px;
    box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.el-form{
    border-radius: 25px;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    transform: translateY(30%);
    
} 

:deep(.el-form-item__content){
    justify-content: center;
    margin-top: 10px;
}

.logo{
    width: 120px;
    height: 120px;
    /* margin-left: 80px; */
    border-radius: 50%;
}

.username,.pwd{
    width: 70%;
}

.el-button{
    width: 60%;
}

.login-other{
    width:60%;
    display: flex;
    justify-content: space-between;
}
.login-other > .toRegister,.forgetPwd{
    font-size: 14px;
    cursor: pointer;
}
.toRegister span{
    color: #999;
    cursor: default;
}


    
/* 自定义输入框样式 */
.group {
 position: relative;
}

.input {
 font-size: 16px;
 padding: 10px 10px 10px 5px;
 display: block;
 width: 200px;
 border: none;
 border-bottom: 1px solid #515151;
 background: transparent;
}

.input:focus {
 outline: none;
}

label {
 color: #999;
 font-size: 18px;
 font-weight: normal;
 position: absolute;
 pointer-events: none;
 left: 5px;
 top: 10px;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.input:focus ~ label, .input:valid ~ label {
 top: -20px;
 font-size: 14px;
 color: #60afff;
}

.bar {
 position: relative;
 display: block;
 width: 200px;
}

.bar:before, .bar:after {
 content: '';
 height: 2px;
 width: 0;
 bottom: 1px;
 position: absolute;
 background: #60afff;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.bar:before {
 left: 50%;
}

.bar:after {
 right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
 width: 50%;
}

.highlight {
 position: absolute;
 height: 60%;
 width: 100px;
 top: 25%;
 left: 0;
 pointer-events: none;
 opacity: 0.5;
}

.input:focus ~ .highlight {
 animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
 from {
  background: #60afff;
 }

 to {
  width: 0;
  background: transparent;
 }
}

/* 自定义按钮样式 */
button {
 padding: 17px 40px;
 border-radius: 50px;
 border: 0;
 background-color: #CDD0D6;
 box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 font-size: 15px;
 transition: all .5s ease;
 cursor: pointer;
}

button:hover {
 letter-spacing: 3px;
 background-color: #409EFF;
 color: hsl(0, 0%, 100%);
 box-shadow: #60afff 0px 7px 29px 0px;
}

button:active {
 letter-spacing: 3px;
 background-color: #409EFF;
 color: hsl(0, 0%, 100%);
 box-shadow: #60afff 0px 0px 0px 0px;
 transform: translateY(10px);
 transition: 100ms;
}
</style>